<template>
	<view class="container">
		<view class="header-pannel">
			<view class="null-pannel"></view>
			<view class="example">
				<uni-forms ref="form" :model="queryParams" labelWidth="80px">
					<uni-forms-item label="订单编号" name="orderCode" class="item-margin">
						<uni-easyinput v-model="queryParams.orderCode" placeholder="请输入订单编号" @blur="inpBlurOrder"
							:focus="inpFocusOrder" ref="Focus" value=""/>
					</uni-forms-item>
					<uni-forms-item label="规格" name="flex" class="item-margin">
						<uni-data-select v-model="queryParams.flex" :localdata="typeList" placeholder="请选择规格"
							@change="selectFlex"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="箱码" name="cartonCode" class="margin0">
						<uni-easyinput v-model="queryParams.cartonCode" placeholder="请输入箱码"
							@confirm="handlebind" :focus="inpFocusCarton"/>
					</uni-forms-item>
				</uni-forms>
			</view>
		</view>

		<view class="table1">
			<uni-table ref="table" border stripe emptyText="暂无更多数据" class="tableAll">
				<uni-tr>
					<uni-th align="center">织板编码</uni-th>
					<uni-th align="center">箱码</uni-th>
				</uni-tr>
				<uni-tr v-for="(item,index) in listData" :key="index">
					<uni-td align="center">{{ item.code }}</uni-td>
					<uni-td align="center">{{ item.cartonCode }}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<view class="footer-btn">
			<button type="primary" @click="submit">提交</button>
		</view>


		<!-- 弹框 -->
		<view>
			<!-- 输入框示例 -->
			<uni-popup ref="alertDialog" type="dialog" :custom="true">
				<view class="popcontent">
					<uni-group v-for="(item,index) in boxCodeList" v-if="item.codeList.length > 1" :key="index">
						<view>
							<uni-row>
								<uni-col :span="6">
									<view>
										织板编码
									</view>
								</uni-col>
								<uni-col :span="18">
									<view class="demo-uni-col light">
										{{item.code}}
									</view>
								</uni-col>
							</uni-row>
						</view>

						<view v-for="(codeItem, index) in item.codeList" :key="codeItem.cartonCode">
							<uni-row>
								<uni-col :span="6">
									<view class="demo-uni-col light">
										数量
									</view>
								</uni-col>
								<uni-col :span="18">
									<view style="margin-bottom: 5rpx;">{{codeItem.cartonCode}}</view>
									<uni-easyinput v-model="codeItem.num" placeholder="请输入数量" />
								</uni-col>
							</uni-row>
						</view>
					</uni-group>

					<view>
						<button class="mini-btn" type="primary" size="mini" @click="allSave">确定</button>
						<button class="mini-btn float-right" type="default" size="mini" @click="dialogClose">取消</button>
					</view>

				</view>
			</uni-popup>
		</view>


		<!-- 提示框 -->
		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>

	</view>

</template>

<script>
	import {
		queryOrderFlexList,
		getbindBoxCode,
		bindBoxCodeEdit,
		bindBoxCodeSave,
		bindBoxCodeNumQuery,
		bindBoxCodeNumUpdate
	} from "@/api/longyi/productMess/Index.js"


	export default {
		data() {
			return {
				type: 'center',
				msgType: 'success',
				messageText: '这是一条成功提示',
				value: '',
				inpFocusOrder: true,
				inpFocusCarton: false,
				multipleFlag: true,
				popParams: {
					cartonCode: "",
					num: ""
				},
				cartonCode: "",
				numArry: [],
				queryParams: {
					orderCode: "",
					cartonCode: "",
					flex: ""
				},
				listData: [],
				listData2: [],
				bindData: {
					orderCode: '',
					type: '',
					code: '',
					specification: '',
					cartonCode: ''
				},
				loading: false,
				typeList: [],
				boxCodeList: [],
				dataList: [],
				rules: {
					orderCode: {
						rules: [{
							required: true,
							errorMessage: '订单编号不能为空'
						}]
					}
				},
				rules2: {
					cartonCode: {
						rules: [{
							required: true,
							errorMessage: '箱码不能为空'
						}]
					}
				}
			}
		},

		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			inpBlurOrder(inpDom) {
				this.inpFocusOrder = false
				this.typeList = []
				let query = {
					"orderCode": this.queryParams.orderCode
				}
				queryOrderFlexList(query).then(res => {
					let list = res.data;
					let arr = []
					list.forEach(function(item) {
						arr.push({
							"text": item,
							"value": item
						});
					});
					this.typeList = arr;
				});
			},
			inpBlurCarton(inpDom) {
				this.inpFocusCarton = false
			},
			dialogToggle(type) {
				this.msgType = type
				this.$refs.alertDialog.open()
			},
			dialogConfirm() {
				this.messageText = `点击确认了 ${this.msgType} 窗口`
				this.$refs.message.open()
			},
			dialogClose() {
				this.$refs.alertDialog.close()
			},
			selectFlex(item) {
				this.queryParams.flex = item;
				this.getUser()
			},
			getUser(ref) {
				//获取该订单号下的物料
				this.$refs.form.validate().then(res => {
					getbindBoxCode(this.queryParams).then(response => {
						this.listData = response.data.list
					})
				})
			},
			//比对箱码和织板编码
			handlebind() {
				const cartonCodesPra = this.queryParams.cartonCode //扫描的箱码
				if (!this.queryParams.cartonCode.includes('_')) {
					this.$modal.msgError("请输入正确的箱码！")
					return
				}
				const cartonMaterialCode = cartonCodesPra.split('_')
				const listArry = this.listData
				for (let i in listArry) {

					if (cartonMaterialCode[0] === listArry[i].code) {
						this.bindData.orderCode = listArry[i].orderCode
						this.bindData.type = listArry[i].type
						this.bindData.code = listArry[i].code
						this.bindData.specification = listArry[i].specification
						this.bindData.cartonCode = cartonCodesPra
						this.loading = true


						bindBoxCodeEdit(this.bindData).then(response => {
							this.inpFocusCarton = true
							this.getUser()
							this.queryParams.cartonCode = ''
							this.inpFocusCarton = true;
							this.$modal.msgSuccess("绑定成功！")
							
						})


						this.loading = false
					}
				}
				this.inpFocusCarton = true;
			},

			submit(ref) {
				let cartonCodeArry = []
				if (this.listData.length <= 0) {
					return
				}
				for (let i in this.listData) {
					cartonCodeArry.push(this.listData[i].cartonCode)
					if (!this.listData[i].cartonCode) {
						this.$modal.msgError("请扫描箱码！")
						return
					}
				}

				const orderCodeData = {
					orderCode: this.queryParams.orderCode
				}
				bindBoxCodeSave(this.listData).then(response => {
					const flag = cartonCodeArry.every((item) => {
						return !item.includes(',')
					})
					if (flag) {
						this.inpFocusOrder = true
						this.queryParams.orderCode = ''
						this.getUser()
						this.$modal.msgSuccess("扫描已完成！")
						return
					}
					
					this.boxCodeList = [];
					this.dataList = [];
					
					for (let i in this.listData) {
						let item = this.listData[i];
						
						let cartonCode = item.cartonCode;
						let arr = cartonCode.split(",");
						
						for(let index in arr){
							let dataItem = {...this.listData[i]};
							dataItem.cartonCode = arr[index];
							dataItem.num = 0;
							this.dataList.push(dataItem);
						}
						
					}
					
					for(let i in this.dataList){
						let tempCode = this.dataList[i].code;
											
						const existingItem = this.boxCodeList.find(item =>
							item.code === tempCode
						);
											
											
						if (existingItem) {
							existingItem.codeList.push(this.dataList[i]);
						} else {
							let codeList = [];
							codeList.push(this.dataList[i]);
							let obj = {
								"code": this.dataList[i].code,
								"codeList": codeList
							};
							this.boxCodeList.push(obj);
						}
					}
					
					this.dialogToggle('info')
				})
			},
			dialogClose() {
				this.$refs.alertDialog.close()
			},
			allSave() {
				bindBoxCodeNumUpdate(this.dataList).then(response => {
					this.$refs.alertDialog.close()
					this.inpFocusOrder = true
					this.queryParams.orderCode = ''
					this.queryParams.cartonCode = '';
					this.queryParams.flex = ''
					this.listData = []
					this.typeList = []
					this.listData2 = []
					this.getUser()
					this.$modal.msgSuccess("领料完成！")
				})

			}
		}
	}
</script>

<style lang="scss">
	.example {
		padding: 15px;
		background-color: #fff;

		// margin: 10px auto;
		.item-margin.is-direction-left {
			margin-bottom: 15px !important;
		}

	}

	.margin0 {
		margin-bottom: 0 !important;
	}

	.header-pannel {
		position: fixed;
		width: 100%;
		top: 44px;
		z-index: 999;
	}

	.null-pannel {
		height: 10px;
		background: #f1f1f1;
	}

	.footer-btn {
		padding: 15px;
		background-color: #fff;
		// margin-top: 66px;
		position: fixed;
		width: 100%;
		bottom: 0;
	}

	.container {
		/**
	  overflow: hidden;
	  */
	}

	.popcontent {
		padding: 15px;
		border-radius: 11px;
		background-color: #fff;
		width: 95vw;
		overflow-x: scroll;
		// height: 500px;
		// overflow-y: scroll;
	}

	.float-right {
		float: right;
	}

	.border1 {
		border: 0.5px solid #eee;
		margin: 15px 0;
	}

	.padding-bottom {
		padding: 15px;
	}

	.padding-top {
		padding: 10px;
	}

	.tableAll {
		word-break: break-all;
	}

	.table1 {
		margin-bottom: 90px;
		margin-top: 140px;
	}
</style>